<template>
  <div class="scheduling">
    <el-divider content-position="left">
      <i></i>任务启用
    </el-divider>
    <el-form ref="form" :model="dataScheduling" label-width="120px" :rules="formRules">
      <el-form-item label="任务是否启用" prop="isStart">
        <el-radio-group v-model="dataScheduling.isStart">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="任务执行周期" prop="executionPeriod">
        <el-radio-group v-model="dataScheduling.executionPeriod">
          <el-radio v-for="(item,index) in executionOptions" :key="index" :label="item.value">{{item.label}}</el-radio>
          <!-- <el-radio :label="2">月</el-radio>
          <el-radio :label="3">周</el-radio>
          <el-radio :label="4">天</el-radio>
          <el-radio :label="5">小时</el-radio>
          <el-radio :label="6">分钟</el-radio>-->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="执行频率" prop="executionFrequency">
        每
        <el-input style="width: 100px" v-model="dataScheduling.executionFrequency"></el-input>
        {{getExecution(dataScheduling.executionPeriod)}} 执行1次
      </el-form-item>
      <el-form-item label="执行时间" prop="executionTime">
        <el-date-picker v-model="dataScheduling.executionTime" type="datetime" placeholder="选择日期时间" style="width: 220px"></el-date-picker>
      </el-form-item>
      <el-divider content-position="left">
        <i></i>任务运行状态
      </el-divider>
      <el-form-item label="是否立即运行" prop="isExecution">
        <el-radio-group v-model="dataScheduling.isExecution">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { isNumberValid } from "@/utils/validate";
import { getDiction } from "@/utils/config.js";
export default {
  components: {},
  data() {
    return {
      dataScheduling: {
        isStart: 0,
        isExecution: 0
      },
      formRules: {},
      executionOptions: [
        {
          value: 1,
          label: "年"
        },
        {
          value: 2,
          label: "月"
        },
        {
          value: 3,
          label: "周"
        },
        {
          value: 4,
          label: "天"
        },
        {
          value: 5,
          label: "小时"
        },
        {
          value: 6,
          label: "分钟"
        }
      ]
    };
  },
  props: {
    initData: Object,
    mode: String
  },
  watch: {
    dataScheduling: {
      deep: true,
      handler: function (val) {
        // console.log("dataScheduling", val);
        this.$emit("input", val);
      }
    },
    initData: {
      deep: true,
      handler: function (obj) {
        // this.$refs.form.resetFields();
        this.dataScheduling = Object.assign({}, obj);
        let _this = this;
        setTimeout(function () {
          _this.$refs.form.clearValidate();// 消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
        }, 30);
      }
    }
  },
  methods: {
    setRules() {
      switch (this.mode) {
        default:
          this.formRules = {
            isStart: [{ required: true, message: "不能为空" }],
            executionPeriod: [{ required: true, message: "不能为空" }],
            executionFrequency: [
              { required: true, message: "不能为空" },
              { validator: isNumberValid }
            ],
            executionTime: [{ required: true, message: "不能为空" }],
            isExecution: [{ required: true, message: "不能为空" }]

          }
          break;
      }
    },
    // 校验数据
    validateForm() {
      let flag = true;
      this.$refs.form.validate((valid) => {
        if (valid) {
          flag = true;
        } else {
          flag = false;
        }
      });
      return flag;
    },
    getExecution(val) {
      return getDiction(this.executionOptions, val);
    }
  },
  mounted() {
    this.setRules();
  }
};
</script>
<style lang="scss" scoped>
.scheduling {
  .el-divider__text.is-left {
    left: 0;
    display: flex;
    flex-direction: row;
    > i {
      display: block;
      width: 3px;
      height: 14px;
      background: #128df3;
      margin-right: 5px;
    }
  }
  .tableBox {
    padding-left: 40px;
  }
}
</style>
